<template>
	<view class="wrap">
		<qs-navbar ref="navbar">
			<view class="slot-wrap" v-if="userRoleValue != 8"><text @click="showPop">{{orgName}}
					<u-icon :name="show?'arrow-up':'arrow-down'">
					</u-icon>
				</text></view>
		</qs-navbar>
		<view class="content">
			<u-card margin="30rpx 30rpx" :show-head="false" box-shadow="0px 0px 15px 0px #e3e3e3" :border="false"
				:show-foot="false" v-for="(item,index) in list" @click="goTo(item)" :key="index">
				<view class="" slot="body">
					<view class="u-main-color u-font-32 u-rela">{{item.deviceName}} <text class="title-tag"
							:class="formatClass(item.deviceState)"></text></view>
					<view class="u-margin-top-20 u-margin-bottom-20">IMEI号：{{item.deviceCode}}</view>
					<view class="u-margin-top-20 u-margin-bottom-20 u-line-1">设备位置：{{item.deviceLocation}}</view>
					<view class="u-margin-top-20 u-margin-bottom-20 u-line-1">实时数据：{{item.realData}}</view>
					<view class="u-margin-top-20 u-margin-bottom-20">最新上报时间：{{formatTime(item.realDataUpdateTime)}}
					</view>

					<!-- <view class="u-text-center  u-margin-top-20 u-margin-bottom-20">
						<u-row gutter="16">
							<u-col span="4" text-align="center">
								<view class="demo-layout bg-purple">水温：46°</view>
							</u-col>
							<u-col span="4" text-align="center">
								<view class="demo-layout bg-purple-light">电流：185A</view>
							</u-col>
							<u-col span="4" text-align="center">
								<view class="demo-layout bg-purple-dark">液位：185cm</view>
							</u-col>
						</u-row>
					</view>
					<view class="u-text-center  u-margin-top-20 u-margin-bottom-20">
						<text>故障：</text>
						<text class="tag-color">主机1</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">主机2</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">进水</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">烟雾</text>
						<text class="u-margin-left-20 u-margin-right-20 tag-color">|</text>
						<text class="tag-color">液位</text>
						<text class="u-margin-left-20 tag-color">|</text>
					</view>
					<view class="u-text-center">
						<text>设备开关项：</text>
						<text>出水</text>
						<text>|</text>
						<text>热水器1</text>
						<text>|</text>
						<text>热水器2</text>
						<text>|</text>
						<text class="u-margin-left-50">模式:自动</text>
					</view> -->
				</view>
			</u-card>
			<u-gap height="20"></u-gap>
			<u-loadmore :status="status" @loadmore="loadmore" />
		</view>

		<u-popup v-model="show" mode="top" :mask="false" :custom-style="popStyle">
			<tree-com :showRadio="true" @handleRadioTree="handleRadioTree"></tree-com>
		</u-popup>
	</view>
</template>

<script>
	import treeCom from '../com/tree/index'
	import {
		famatDatesTimes
	} from '../../components/common/com.js';
	import {
		regionalRoot,
		getDeviceMonitorList,
		querAllDevicesByUserId
	} from '../../api/eqment/index.js'
	export default {
		components: {
			treeCom
		},
		data() {
			return {
				list: [],
				show: false,
				status: 'loadmore',
				popStyle: {},
				cur_page: 1,
				page_size: 15,
				orgId: 0,
				orgName: '请选择',
				statusBarHeight: 0,
				userRoleValue: ''
			};
		},
		onShow() {
			if (!this.vuex_user.hasLogin) {
				uni.reLaunch({
					url: '/pages/account/login/pwd-login'
				});
				// this.$u.route('/pages/account/login/pwd-login');
				// this.$u.route({
				// 	url:'/pages/account/login/pwd-login',
				// 	type:'reLaunch'
				// })
			} else {
				// this.getData()
				this.userRoleValue = uni.getStorageSync('uer_role_value')
				if (this.userRoleValue != 8) {
					if (this.orgId) {
						this.getDeviceMonitorList()
					} else {
						this.getData()
					}

				} else {
					this.querAllDevicesByUserId()
				}
				// this.querAllDevicesByUserId()
			}

		},
		onLoad() {

			uni.getSystemInfo({
				success: (res) => {
					console.log(123456, this.statusBarHeight)
					this.statusBarHeight = res.statusBarHeight //状态栏的高度  字节跳动小程序不支持

				}
			});
		},
		onPullDownRefresh() {
			this.cur_page = 1
			// this.getDeviceMonitorList()
			if (this.userRoleValue != 8) {
				// this.getData();
				this.getDeviceMonitorList()
			} else {
				this.querAllDevicesByUserId()
			}
			// this.querAllDevicesByUserId()
		},
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			//获取数据
			getData() {
				regionalRoot({

				}).then((res) => {
					console.log(res)
					this.orgId = res.expandData.root.id
					this.orgName = res.expandData.root.orgName
					this.getDeviceMonitorList()
				})
			},
			//获取设备列表
			getDeviceMonitorList() {
				getDeviceMonitorList({
					pageNum: this.cur_page,
					pageSize: this.page_size,
					orgId: this.orgId,
					// typeId: this.typeId,
				}).then((res) => {
					console.log(res)
					if (res.data.list < this.page_size) {
						this.status = 'nomore';
					}
					if (res.data.list == 0) {
						return this.$u.toast('已无更多数据！');
					} else {
						if (this.cur_page == 1) {
							this.list = res.data.list
						} else {
							// 过滤重复数据
							let resList = res.data.list
							let resDataList = []
							resDataList = resList.filter((item) => !this.list.some(key => item.deviceCode == key
								.deviceCode && item.deviceId ==
								key.deviceId))

							this.list = this.list.concat(resDataList);
						}
					}
					uni.stopPullDownRefresh()
					console.log(11111, this.list)
				})
			},
			//根据用户查询所有设备
			querAllDevicesByUserId() {
				querAllDevicesByUserId({
					pageNum: this.cur_page,
					pageSize: this.page_size,
				}).then((res) => {
					console.log(res)
					uni.stopPullDownRefresh()
					if (res.data.list < this.page_size) {
						this.status = 'nomore';
					}
					if (res.data.list == 0) {
						return this.$u.toast('已无更多数据！');
					} else {
						if (this.cur_page == 1) {
							this.list = res.data.list
						} else {
							// 过滤重复数据
							let resList = res.data.list
							let resDataList = []
							resDataList = resList.filter((item) => !this.list.some(key => item.deviceCode == key
								.deviceCode && item.deviceId ==
								key.deviceId))

							this.list = this.list.concat(resDataList);
						}
					}
				})
			},
			showPop() {
				this.popStyle = {
					top: (this.$refs.navbar.navbarHeight + 1 + this.statusBarHeight) + 'px'
				}
				this.show = true
			},
			goTo(row) {
				uni.setStorage({
					key: 'list_item',
					data: JSON.stringify(row),
					success: () => {
						this.$u.route({
							url: '/pages/eqment/list/index/detail'
						});
					}
				});
			},
			loadmore() {
				++this.cur_page
				// 
				if (this.userRoleValue != 8) {
					// this.getData();
					this.getDeviceMonitorList()
				} else {
					this.querAllDevicesByUserId()
				}
				// this.querAllDevicesByUserId()
			},
			handleRadioTree(data) {
				this.cur_page = 1
				this.orgId = data.data.id
				this.orgName = data.data.orgName
				if (this.userRoleValue != 8) {
					// this.getData();
					this.getDeviceMonitorList()
				} else {
					this.querAllDevicesByUserId()

				}
				// this.getDeviceMonitorList()
				// this.querAllDevicesByUserId()
				this.show = false
			},
			formatTime(cellValue) {
				return famatDatesTimes(cellValue);
			},
			formatClass(val) {
				return val == '离线' ? 'off' : val == '告警' ? 'err' : ''
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #ffffff;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	/deep/.qs-navbar {
		box-shadow: 0 0 10px 10px #f2f2f2;
		border-bottom: 1px solid #f2f2f2;
		background-color: #fafafa;
	}

	.content {
		padding-bottom: 160rpx;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;

		.u-icon {
			margin-left: 20rpx;
		}
	}

	.tag-color {
		color: #19be6b;
	}

	.title-tag {
		position: absolute;
		right: 0;
		top: 0;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #19be6b;
	}

	.title-tag.off {
		background-color: #909399;
	}

	.title-tag.err {
		background-color: #fa3534;
	}

	/deep/.u-drawer-content.u-drawer-content-visible {
		box-shadow: 0px 5px 15px 0px #999;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.text-overflow-1 {}
</style>
<style lang="scss">

</style>
